<template>
	<view class="notice">
		<view class="notice_text">
			<view class="wenzi"><image class="avatar" :src="data.avatar"></image>{{data.user_name}}开出&nbsp;{{data.type}}款&nbsp;{{data.goods_name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.notice {
		width: 80%;
		height: 86rpx;
		background-image: url('../../../static/images/newhone/notice.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		line-height: 86rpx;
		color: #fff;
		font-size: 32rpx;

		.notice_text {
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			
			animation: noticeScroll 4s 1 linear forwards;
			.avatar{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.wenzi{
				display: flex;
				align-items: center;
				white-space: nowrap;
				line-height: 86rpx;
			}
		}
	}

	@keyframes noticeScroll {
		0% {
			// left: 20%;
			transform: translateX(20%);
		}

		100% {
			// left: -50%;
			transform: translateX(-100%);

		}
	}
</style>
